var path = $('#path').val();
var datas = [
  {
    'year': '2023',
    'month': {
      '11': [
        {
          'create_time': '11月1日 01:28',
          'content': '学习html知识+css样式表'
        }, {
          'create_time': '11月2日 09:25',
          'content': '学习使用layui工具和Jquery工具，并使用flask框架开始搭建网站'
        },
        {
          'create_time': '11月3日 04:03',
          'content': '参照其他博客网开始设计网站结构'
        }, {
          'create_time': '11月4日 10:03',
          'content': '决定设计网站首页、文章专栏、时间轴、关于本站四个部分'
        }, {
          'create_time': '11月5日 09:27',
          'content': '码登录注册界面代码'
        }, {
          'create_time': '11月6日 02:03',
          'content': '码代码'
        }, {
          'create_time': '11月7日 02:03',
          'content': '码代码'
        }, {
          'create_time': '11月8日 02:03',
          'content': '码代码'
        }, {
          'create_time': '11月9日 02:03',
          'content': '码代码'
        }, {
          'create_time': '11月10日 02:03',
          'content': '学习数据库知识，数据库建模，搭建数据库结构'
        }, {
          'create_time': '11月11日 02:03',
          'content': '连通前后端'
        }, {
          'create_time': '11月12日 02:03',
          'content': '美化加改进'
        }, {
          'create_time': '11月13日 02:03',
          'content': '美化加改进'
        }],
    },
  }];

$(function() {
  var _html = '';
  for (var i = 0; i < datas.length; i++) {
    _html += '<div class="timeline-year">';
    _html += '<h2><a class="yearToggle" href="javascript:;">' + datas[i].year +
        '年</a><i class="fa fa-caret-down fa-fw"></i></h2>';
    var monthDatas = datas[i].month;
    for (var _month in monthDatas) {
      var _data = monthDatas[_month];
      _html += '<div class="timeline-month">';
      _html += '<h3 class=" animated fadeInLeft"><a class="monthToggle" href="javascript:;">' +
          _month + '月</a><i class="fa fa-caret-down fa-fw"></i></h3>';
      _html += '<ul>';
      for (var j = 0; j < _data.length; j++) {
        _html += '<li class=" ">';
        _html += '<div class="h4  animated fadeInLeft">';
        _html += '<p class="date">' + _data[j].create_time + '</p>';
        _html += '</div>';
        _html += '<p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>';
        _html += '<div class="content animated fadeInRight">' +
            _data[j].content + '</div>';
        _html += '<div class="clear"></div>';
        _html += '</li>';
      }
      _html += '</ul>';
      _html += '</div>';
    }
    _html += '</div>';
  }
  $('.timeline-line').after(_html);
  $('.monthToggle').click(function() {
    $(this).parent('h3').siblings('ul').slideToggle('slow');
    $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
  });
  $('.yearToggle').click(function() {
    $(this).parent('h2').siblings('.timeline-month').slideToggle('slow');
    $(this).siblings('i').toggleClass('fa-caret-down fa-caret-right');
  });
});

$(document).ready(function() {
  $('.fa-hourglass-half').parent().parent().addClass('layui-this');
});